<template>
	<view class="main">
		<image class="cover" :src="data.album?.ImgUrl" mode="widthFix"></image>
		<view class="album-info">
			<view class="album-name">{{ data.album?.AlbumName }}</view>
			<view class="album-desc">{{ data.album?.Desc }}</view>
			<view class="img-box">
				<template v-for="(item,index) in data.dataList" :key="item.AuthorID">
					<image :src="item.Image" mode="widthFix" @click="changeImage(item)" />
					<view v-if="(index + 1) % 9 === 0" class="box-id">
						<ad-custom :unit-id="$store.state.configInfo.adIds.nativeAd1"></ad-custom>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	const http = uniCloud.importObject("wallpaper", {
		customUI: true,
	});
	export default {
		data() {
			return {
				data: {
					album: {},
					dataList: [],
				},
				paramsData: {
					albumID: undefined,
					pageindex: 0,
					pagesize: 30,
				},
				loading: false, // 是否正在加载
				finished: false, // 是否已加载完全部数据
			};
		},
		onLoad(options) {
			this.paramsData.albumID = options.id;
			this.init();
		},
		onReachBottom() {
			// 触底时加载更多
			if (!this.loading && !this.finished) {
				this.paramsData.pageindex++;
				this.init();
			}
		},
		onShareAppMessage() {
			return {
				title: this.data.album.AlbumName,
				path: `/pages/Album/AlbumDetails?id=${this.paramsData.albumID}`,
				imageUrl: this.data.album.ImgUrl,
			}
		},
		onShareTimeline() {
			return {
				title: this.data.album.AlbumName,
				path: `/pages/Album/AlbumDetails?id=${this.paramsData.albumID}`,
				imageUrl: this.data.album.ImgUrl,
			}
		},
		methods: {
			async init() {
				if (this.loading || this.finished) return;
				this.loading = true;
				const res = await http.getAlbumDetails(this.paramsData);
				if (res.code === 200) {
					// 判断是否第一页
					if (this.paramsData.pageindex === 0) {
						this.data = res.data;
					} else {
						// 累加图片数据
						this.data.dataList = this.data.dataList.concat(
							res.data.dataList || []
						);
					}
					// 判断是否还有更多数据
					if (
						!res.data.dataList ||
						res.data.dataList.length < this.paramsData.pagesize
					) {
						this.finished = true;
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error",
					});
				}
				this.loading = false;
			},
			changeImage(item) {
				uni.navigateTo({
					url: `/pages/preview/preview?src=${item.Image}`
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.cover {
		width: 100%;
	}

	.album-info {
		padding: 24rpx 32rpx 32rpx;

		.album-name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.album-desc {
			font-size: 28rpx;
			color: #a0a0a0;
			margin-bottom: 24rpx;
		}
	}

	.img-box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12rpx;

		image {
			width: 100%;
			display: block;
			border-radius: 12rpx;
		}

		.box-id {
			grid-column: 1 / -1;
		}
	}
</style>